<template>
  <div class="layout-card">
    <div class="layout-card-header">
      <div class="title">业务入口</div>
      <q-btn color="primary" icon="add" label="新增" @click="open" />
    </div>
    <div class="layout-card-body-grid">
      <div v-for="(bxType, index) in 4" :key="index" class="layout-card-item"></div>
    </div>
  </div>
  <!-- 编辑对话框 -->
  <q-dialog v-model="editDialog" persistent>
    <q-card style="min-width: 350px">
      <q-card-section>
        <div class="text-h6">编辑</div>
      </q-card-section>

      <q-card-section class="q-pt-none">
        <slot name="edit-form" :editRow="currentEditRow" :close="closeEditDialog">
          <!-- 默认编辑表单 -->
          <div>默认编辑表单</div>
        </slot>
      </q-card-section>
      <q-card-actions align="right">
        <q-btn flat label="取消" color="negative" @click="closeEditDialog" />
        <q-btn flat label="确定" color="primary" @click="saveEdit" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<script setup>
import { ref } from 'vue'

const editDialog = ref(false)
const currentEditRow = ref(null)

const open = () => {
  editDialog.value = true
}
const closeEditDialog = () => {
  editDialog.value = false
  currentEditRow.value = null
}
const saveEdit = () => {
  editDialog.value = false
  currentEditRow.value = null
}
</script>
<style scoped lang="scss">
.layout-card-item {
  background: #ffffff;
  box-shadow: 0 4px 8px 0 rgba(45, 83, 156, 0.1);
  border-radius: 10px;
  border: 1px solid #a0b3d7;
  position: relative;
  overflow: hidden;
  //width: 100%;
  min-width: 300px;
  text-align: left;
  padding: 10px;
  min-height: 200px;

  .checked {
    position: absolute;
    width: 40px;
    height: 21px;
    right: 0;
    top: 0;
    background: #4080ff;
    border-radius: 0 0 0 10px;
  }

  .title {
  }

  .desc {
    font-size: 12px;
    font-weight: 500;
  }
}
</style>
